<template>
  <a-modal
    title="房間選擇"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-row :gutter="24">
      <a-col :md="6" :sm="24" class="state_context">
        <a-list :data-source="data" class="scrll_list">
          <a-list-item
            slot="renderItem"
            slot-scope="item, indexa"
            class="simple_list_item"
            @click="stateListitemActive(item.id, item.name, item.category)"
          >
            <a-card
              :key="indexa"
              class="state_list"
              :class="simpleListitemActive === item.id ? 'simple_list_item_active' : ''"
            >
              {{ item.name }}
            </a-card>
          </a-list-item>
        </a-list>
      </a-col>
      <a-col :md="18" :sm="24" class="state_item_context">
        <a-card :bordered="false" class="header-card">
          <a-row :gutter="24" v-for="(item, indexit) in itemList" :key="indexit">
            <div class="room_item_lis">
              <h3>
                {{ item.name }}
              </h3>
              <a-checkbox
                v-for="(i, indexi) in item.list"
                :key="indexi"
                class="bt-tt"
                @click="checkBoxCheck(i.id, i.roomStrName)"
                :class="i.id === itemChecked ? 'check_box_active' : 'check_box'"
                :checked="i.id === itemChecked"
                :disabled="i.disabled"
              >
                {{ i.name }}
              </a-checkbox>
            </div>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { getStateList, getStateRoomList } from '@/api/modular/main/busrealestate/busRealEstateManage'

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      simpleListitemActive: -1,
      data: [],
      itemList: [],
      itemChecked: 0,
      itemCheckedName: '',
      roomStrName: '',
      type: 0
    }
  },
  methods: {
    // 初始化方法
    select(type) {
      this.getAllStateList()
      this.visible = true
      this.type = type
    },
    stateListitemActive(id, name, category) {
      this.simpleListitemActive = id
      this.getAllStateRoomList(id, name, category)
    },
    checkBoxCheck(id, roomStrName) {
      this.itemChecked = id
      this.roomStrName = roomStrName
    },
    getAllStateList() {
      getStateList().then((res) => {
        if (res.code === 200) {
          this.data = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getAllStateRoomList(id, name, type) {
      getStateRoomList({ id: id, name: name, category: type, disableType: this.type }).then((res) => {
        if (res.code === 200) {
          this.itemList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      this.$emit('ok', this.itemChecked, this.roomStrName)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.simpleListitemActive = -1
      this.data = []
      this.itemList = []
      this.itemChecked = 0
      this.itemCheckedName = ''
      this.roomStrName = ''
    }
  }
}
</script>

<style lang="less">
.ant-modal-body {
  padding: 6px;
}
.state_context {
  height: 600px;
  .scrll_list {
    height: 100%;
    overflow-y: auto;
    .simple_list_item {
      border-bottom: 0px;
      padding: 0px;
      .state_list {
        width: 100%;
        .ant-card-body {
          padding: 6px 10px;
        }
      }
    }
    .simple_list_item_active {
      border-left: solid 4px rgb(17, 81, 117);
      color: rgb(17, 81, 117);
      background-color: rgb(180, 220, 243);
    }
  }
  .scrll_list::-webkit-scrollbar {
    width: 8px;
  }
  .scrll_list::-webkit-scrollbar-track {
    background-color: rgb(250, 241, 241);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  .scrll_list::-webkit-scrollbar-thumb {
    background-color: rgb(205, 209, 205);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
}
.state_item_context{
  .header-card{
    .ant-card-body{
      padding: 0px;
    }
    .room_item_lis{
      padding:10px 30px;
      .bt-tt{
        padding: 10px;
        margin-left: 8px;
        margin-bottom: 8px;
      }
      .check_box{
        border: solid 1px rgb(241, 238, 238);
      }
      .check_box_active{
        border: solid 1px rgb(109, 185, 236);
      }
    }
  }

}
</style>
